$wcfAcpMenuWidth: 150px;
$wcfAcpSubMenuWidth: 300px;

.layoutBoundary {
	margin: 0;
	max-width: none;
	min-width: 0;
}

/* page header */
.pageHeaderContainer {
	@include screen-lg {
		.pageHeader .layoutBoundary {
			background-color: rgb(50, 92, 132);
			height: 50px;
			padding: 0;
		}
		
		.pageHeaderLogo {
			background-color: rgb(58, 109, 156);
			flex: 0 0 $wcfAcpMenuWidth;
			height: 50px;
			margin: 0;
			order: 1;
			position: relative;
			
			&:last-child {
				flex: 1 1 auto;
			}
			
			.pageHeaderLogoLarge {
				display: none;
			}
			
			.pageHeaderLogoSmall {
				display: inline;
				max-height: 30px;
			}
			
			> a {
				align-items: center;
				bottom: 0;
				display: flex;
				justify-content: center;
				left: 0;
				position: absolute;
				right: 0;
				top: 0;
			}
		}
		
		.mainMenu {
			flex: 0 0 auto;
			margin-right: 0;
			order: 2;
		}
		
		.pageHeaderSearch {
			display: block;
			flex: 0 0 auto;
			margin-bottom: 0;
			order: 3;
			position: static;
			
			// force to take up the full available height
			/*position: relative;
			top: -10px;*/
			
			.pageHeaderSearchType > .button {
				background-color: rgba(0, 0, 0, .2);
				color: $wcfHeaderSearchBoxPlaceholderActive;
				align-items: center;
				border-radius: 0;
				display: flex;
				height: 50px;
				padding: 6px 10px;
				
				&:hover {
					background-color: rgba(0, 0, 0, .4);
				}
			}
			
			.pageHeaderSearchInputContainer {
				background-color: $wcfHeaderMenuLinkBackground;
				border-radius: 0;
				box-shadow: none;
				padding: 0;
			}
			
			.pageHeaderSearchInput {
				height: 50px;
				width: 300px !important;
				
				background-color: transparent;
				color: $wcfHeaderMenuLinkActive;
				padding: 6px 8px;
				
				&:hover,
				&:focus {
					background-color: rgba(0, 0, 0, .1);
				}
			}
			
			.pageHeaderSearchInputButton {
				display: none;
			}
		}
		
		.userPanel {
			flex: 1 1 auto;
			margin-right: 20px;
			order: 4;
		}
	}
	
	@include screen-md-down {
		max-width: 100vw;
	}
}

.acpSearchDropdown {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-width: 0;
	position: fixed;
	top: 50px !important;
	width: 300px;
	
	&::before,
	&::after {
		display: none;
	}
	
	> .dropdownText {
		color: $wcfContentDimmedText;
	}
}


.acpPageContentContainer {
	flex: 1 0 auto;
	
	#content {
		// required by IE 11 for proper width calculation
		flex: 1;
	}
}

@include screen-lg {
	.acpPageMenu .icon, .acpPageSubMenu .icon {
		color: inherit;
	}
	
	.acpPageMenu {
		background-color: rgb(50, 92, 132);
		bottom: 0;
		left: 0;
		text-align: center;
		overflow: hidden;
		position: fixed;
		top: 50px;
		width: $wcfAcpMenuWidth;
		
		.acpPageMenuLink {
			//background-color: rgb(43, 79, 113);
			color: rgba(255, 255, 255, .7);
			display: block;
			padding: 20px 10px;
			
			&:hover {
				//background-color: rgb(36, 66, 95);
				background-color: rgb(43, 79, 113);
				color: rgba(255, 255, 255, 1);
			}
			
			&.active {
				background-color: rgb(36, 66, 95);
				color: rgba(255, 255, 255, 1);
				
				> .icon {
					transform: scale(1);
				}
			}
			
			> .icon {
				transform: scale(.8);
				transition: transform .12s linear;
			}
		}
		
		.acpPageMenuItemLabel {
			display: block;
			margin-top: 5px;
		}
	}
	
	.acpPageSubMenu {
		background-color: rgb(36, 66, 95);
		bottom: 0;
		left: $wcfAcpMenuWidth;
		overflow: hidden;
		position: fixed;
		top: 50px;
	}
	
	.acpPageSubMenuCategoryList {
		overflow: hidden;
		width: $wcfAcpSubMenuWidth;
		
		&:not(.active) {
			display: none;
		}
		
		> .acpPageSubMenuCategory {
			margin-top: 20px;
			padding-left: 20px;
			
			> span {
				color: rgba(255, 255, 255, .5);
				display: block;
				padding: 5px 20px;
				text-transform: uppercase;
			}
			
			&:last-child {
				margin-bottom: 20px;
			}
		}
		
		.acpPageSubMenuLink,
		.acpPageSubMenuIcon {
			color: rgb(255, 255, 255);
			display: block;
			overflow: hidden;
			padding: 5px 20px;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		
		.acpPageSubMenuLink:hover,
		.acpPageSubMenuLink:hover ~ .acpPageSubMenuIcon:not(.active),
		.acpPageSubMenuIcon:hover {
			background-color: rgb(43, 79, 113);
		}
		
		.acpPageSubMenuLinkWrapper {
			display: flex;
			
			> .acpPageSubMenuLink {
				flex: 1 1 auto;
			}
			
			> .acpPageSubMenuIcon {
				flex: 0 0 auto;
			}
		}
		
		.acpPageSubMenuItemList > .active > a,
		.acpPageSubMenuLink.active,
		.acpPageSubMenuLink.active ~ .acpPageSubMenuIcon,
		.acpPageSubMenuIcon.active {
			background-color: rgb(250, 250, 250) !important;
			color: rgb(44, 62, 80) !important;
		}
	}
	
	.pageContainer:not(.acpPageHiddenMenu) {
		.acpPageContentContainer {
			padding-left: $wcfAcpMenuWidth;
		}
		
		.pageFooter {
			padding-left: $wcfAcpMenuWidth;
		}
	}
	
	.pageContainer.acpPageSubMenuActive {
		.acpPageContentContainer,
		.pageFooter {
			padding-left: $wcfAcpMenuWidth + $wcfAcpSubMenuWidth;
		}
	}
}

@include screen-md-down {
	.mainMenu {
		order: 1;
	}
	
	.pageHeaderLogo {
		order: 2;
	}
	
	.userPanel {
		order: 3;
	}
	
	.acpPageMenu,
	.acpPageSubMenu {
		display: none;
	}
}

.main {
	flex: 1 1 auto;
	
	@include screen-lg {
		padding: 40px 0;
	}
	
	@include screen-md-down {
		padding: 20px 0;
	}
}

.pageFooterCopyright {
	background-color: rgb(58, 109, 156);
}

.codemirrorToolbar {
	background-color: rgb(52, 73, 94);
	display: flex;
	flex-wrap: wrap;
	
	> li {
		flex: 0 0 auto;
		margin-bottom: 1px;
		
		> a {
			color: rgb(255, 255, 255);
			display: block;
			font-size: 12px;
			outline: none;
			padding: 10px;
			text-align: center;
			font-weight: 400;
			
			&:hover {
				background-color: rgb(19, 34, 48);
			}
			
			.icon {
				color: inherit;
			}
		}
	}
}

.CodeMirror {
	word-wrap: normal;
	height: auto !important;
}

.CodeMirror-scroll {
	min-height: 300px;
	max-height: 1000px;
}

#styleLogo,
#styleLogoMobile {
	background-color: #fff;
	background-image: url();
	border: 1px solid #ccc;
	min-height: 20px;
	min-width: 20px;
}

.selectedImagePreview,
.selectedFaviconPreview {
	img {
		margin-bottom: 5px;
	}
}

#coverPhotoPreview {
	background: no-repeat center center;
	background-size: cover;
	height: 200px;
	margin-bottom: 5px;
	
	@include screen-xs {
		height: 150px;
	}
}

#uploadCoverPhoto > .button {
	vertical-align: top;
}
